import React, { useState, useEffect } from 'react';
import { Collapse, Button, Table, Row, Col, Space } from 'antd';
import moment from 'moment';
import { ColumnsType } from 'antd/lib/table';
import styles from './index.less';
import Countdown from 'antd/lib/statistic/Countdown';
const { Panel } = Collapse;
interface CRowProps {
    flightNo: string,
    range: string,
    time: string,
    isCanBuy: string,
}
interface Props {
    dataSource?: Array<CRowProps>,
    str?: string,
    intervalTime?: number,
}


function FixedCollapse(props: Props) {
    useEffect(() => {
        setData(props.dataSource);
        if (props.intervalTime) {
            const currentDeadline = Date.now() + props.intervalTime;// Moment is also OK
            setDeadline(currentDeadline);
        }
    }, [props.dataSource]);
    const [data, setData] = useState<Array<CRowProps> | undefined>(props.dataSource);
    const [deadline, setDeadline] = useState<number>(0);
    const [cancel, setCancel] = useState<boolean>(false);
    const [mainHidden, setMainHidden] = useState<boolean>();
    const columns: ColumnsType = [
        {
            title: '航班号',
            dataIndex: 'no',
            key: 'no',
            width: 80,
        },
        {
            title: '区间',
            dataIndex: 'range',
            sorter: (a: CRowProps, b: CRowProps) => a.range.includes('虹桥') ? 1 : b.range.includes('浦东') ? 0 : -1,
            filters: [{ text: '选虹桥', value: '虹桥' },
            { text: '选浦东', value: '浦东' }],
            onFilter: (value: string, record: CRowProps) => {
                console.log('目前区间', value);
                return record.range.includes(value);
            },
            key: 'range',
            width: 140,
        },
        {
            title: '时间',
            dataIndex: 'time',
            key: 'time',
            render: (text: any, record: any) => text,
            sorter: (a: CRowProps, b: CRowProps) => {
                const [startTime, endTime] = a.range.split('-');
                const [bStartTime, bEndTime] = b.range.split('-');
                return moment(startTime, 'HH:mm').isBefore(bStartTime) ? 1 : -1;
            },
            width: 110,
        },
        {
            title: '是否可买',
            dataIndex: 'isCanBuy',
            key: 'isCanBuy',
            defaultFilteredValue: ['是'],
            filters: [{ text: '是', value: '是' },
            { text: '否', value: '否' },
            ],
            onFilter: (value: string, record: CRowProps) => record.isCanBuy.indexOf(value) === 0,
            sorter: (a: CRowProps, b: CRowProps) => a.isCanBuy === '是' ? 1 : b.isCanBuy === "否" ? 0 : -1,
            render: (text: any, record: any) => text,
            width: 30,
        },
    ]
    function sendRefreshNotice() {
        console.log('send refresh notice>>> *')
        window.postMessage({ cmd: 'refresh', source: 'ceair-auto-fixed' }, '*');
    }
    function cancelSendNotice() {
        setCancel(true);
        window.postMessage({ cmd: 'cancel', source: 'ceair-auto-fixed' }, '*');
    }
    function wrapSendRefreshNotice() {
        if (cancel) {
            console.log('...已取消');
            return;
        }
        sendRefreshNotice();
    }
    function renderCountdown(node: React.ReactNode) {
        if (cancel) {
            return <span>取消...重新开始请刷新页面</span>
        }
        return <div>{node}</div>
    }
    function resetTime() {
        if (props.intervalTime) {
            const currentDeadline = Date.now() + props.intervalTime;// Moment is also OK
            setDeadline(currentDeadline);
            setCancel(false);
        }

    }
    const handleVisible = () => {
        setMainHidden(!mainHidden);
        document.getElementById('main-area')?.setAttribute('style', `visibility: ${!mainHidden ?   'hidden':'visible'}`)
    };
    return <Collapse defaultActiveKey={['1']} onChange={() => { }}>
        <Panel header="快速操作" key="1">
            <Space>
                <Button type="primary" block id="top_top_top_099" onClick={(e) => {
                    e.stopPropagation()
                    e.preventDefault();
                    sendRefreshNotice();
                }}>refresh</Button>
                <Button type="default" block id="top_top_top_100" onClick={(e) => {
                    e.stopPropagation();
                    e.preventDefault();
                    cancelSendNotice();
                }}>cancel</Button>
                <Button type="default" block onClick={resetTime}>reset</Button>
                <Button type="default" block onClick={handleVisible}>{mainHidden ?  'visibleMain':'hiddenMain'}</Button>
                <Countdown title="倒计时" valueRender={renderCountdown} value={deadline} onFinish={wrapSendRefreshNotice} />
            </Space>
        </Panel>
        <Panel header="票列表" key="2"  >
            <div className={styles.table}>
                <Table columns={columns} dataSource={data} pagination={false} />
            </div>
        </Panel>
    </Collapse>
}
export default FixedCollapse;